---
# title: "Fill"
title: "填充"
# description: "Utilities for styling the fill of SVG elements."
description: "用于设置 SVG 元素填充(fill)样式的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/fill'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用

<!-- Use `fill-current` to set the fill color of an SVG to the current text color. This makes it easy to set an element's fill color by combining this class with an existing [text color utility](/docs/text-color). -->

<!-- Useful for styling icon sets like [Zondicons](http://www.zondicons.com/) that are drawn entirely with fills. -->
使用 `fill-current`将 SVG 的填充色设置为当前的文本颜色。通过将该类与现有的[文本颜色功能类](/docs/text-color)相结合，可以轻松设置元素的填充颜色。

对于像 [Zondicons](http://www.zondicons.com/) 这样完全用填充色绘制的图标集来说是很有用的：

```html emerald
<template preview>
  <div class="text-center">
    <svg class="fill-current text-emerald-600 inline-block h-12 w-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
    </svg>
  </div>
</template>

<svg class="**fill-current text-green-600** ..."></svg>
```

<!-- ## Customizing -->
## 自定义 

<!-- Control which fill utilities Tailwind generates by customizing the `theme.fill` section of your `tailwind.config.js` file: -->
通过自定义您的 `tailwind.config.js` 文件的 `theme.fill` 部分来控制 Tailwind 生成哪些 `fill` 功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
-     fill: {
-       current: 'currentColor',
-     }
+     fill: theme => ({
+       'red': theme('colors.red.500'),
+       'green': theme('colors.green.500'),
+       'blue': theme('colors.blue.500'),
+     })
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="fill" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="fill" />
